import React from 'react'
import _ from 'lodash'

import Card from '../../../../components/Card'
import Grid from '../../../../components/Grid'
import Tab from '../../../../components/Tab'
import Progress from '../../../../components/Progress'
import Accordion from '../../../../components/Accordion'
import Benchmarking from '../../components/Benchmarking'

// Data
import {
  projectItemsOverviewData,
  projectItemsTabs,
  projectItemsProgressData,
} from '../../data'

import styles from '../../styles.less'

const projectItemsAccordionHeader = [{
  title: '废矿物油综合利用项',
  header: (
    <div className={styles.header}>
      <div>
        <span>废矿物油综合利用项目</span>
      </div>
      {/* TODO change status */}
      <span className={styles.status}>已完成</span>
    </div>
  ),
  children: [{
    title: '行政区划',
    value: '绍兴市',
  }, {
    title: '项目规模',
    value: '5万吨/年'
  }, {
    title: '建设单位',
    value: '绍兴光之源环保有限公司'
  }, {
    title: '项目进度',
    value: '已完成'
  }]
}].map(item => {
  return _.merge(item, {
    isMore: true,
    url: '/App/projectDetails'
  })
})

export default class ProjectItems extends React.Component {
  state = {
    projectItemsOverviewData: [],
    projectItemsTabs: [],
    projectItemsProgressData: [],
  }

  componentDidMount() {
    this.getProjectItemsOverviewData()
    this.getProjectItemsTabs()
    this.getProjectItemsProgressData()
  }

  getProjectItemsOverviewData = () => {
    this.setState({
      projectItemsOverviewData,
    })
  }

  getProjectItemsTabs = () => {
    this.setState({
      projectItemsTabs,
    })
  }

  getProjectItemsProgressData = () => {
    this.setState({
      projectItemsProgressData
    })
  }

  render() {
    const {
      projectItemsOverviewData,
      projectItemsTabs,
      projectItemsProgressData,
    } = this.state

    return (
      <div className={styles.accordionHeader}>
        <Card
          title='工作报告总览'
          extra='绍兴市'
          showRight
          showPop
        >
          <Grid data={projectItemsOverviewData} />
        </Card>
        <Benchmarking />

        <Card
          title='项目列表'
          showRight
          icon='search'
        >
          <Tab tabs={projectItemsTabs}>
            <div className={styles.container + ' ' + styles.container_project}>
              {
                projectItemsProgressData.map(item => (
                  <Progress
                    key={item.progress}
                    progress={item.progress}
                    progressColor={item.progressColor}
                  />
                ))
              }
            </div>
            <div>
              Content of second tab
            </div>
            <div>
              Content of third tab
            </div>
            <div>
              Content of fourth tab
            </div>
          </Tab>
        </Card>

        <Accordion data={projectItemsAccordionHeader} />
        <div style={{
          height: '50px'
        }} />
      </div>
    )
  }
}